<template>
  <div class="list-wrap xui-fc">

    <!-- 图文列表，用于资讯列表 -->
    <img-text-list v-if="listTypeStr === 'imgTextList'" v-for="(item,index) in listItems" :item="item" :href="`${routePath}/detail/${item.id}`"  :key="index"></img-text-list>

    <!-- 大图列表, 左侧大图，右侧文字 -->
    <big-img-list v-if="listTypeStr === 'bigImgList'" v-for="(item,index) in listItems" :item="item" :href="`${routePath}/detail/${item.id}`"  :key="index"></big-img-list>

    <!-- 大图卡片, 用于展览交流等-->
    <big-img-card v-if="listTypeStr === 'bigImgCard'" v-for="(item,index) in listItems" :item="item" :href="`${routePath}/detail/${item.id}`"  :key="index"></big-img-card>

    <!-- 占页面一半的宽度 -->
    <half-width-list class="xui-fl xui-margin-right" v-if="listTypeStr === 'halfWidthList'" v-for="(item,index) in listItems" :item="item" :href="`${routePath}/detail/${item.id}`"  :key="index"></half-width-list>
  </div>
</template>

<script>
import imgTextList from "@/components/list/img-text-list";
import bigImgList from "@/components/list/big-img-list";
import bigImgCard from "@/components/list/big-img-card";
import halfWidthList from "@/components/list/half-width-list";

const listTypeToString = {
  "1": "imgTextList",
  "2": "bigImgList",
  "3": "bigImgCard",
  "4": "halfWidthList"
};

export default {
  props: {
    listItems: Array,
    listType: [String]
  },
  computed: {
    listTypeStr() {
      return listTypeToString[this.listType];
    },
    routeItem() {
      let routes = this.$store.getters.siteMap;
      let result;
      routes.forEach(route => {
        if (route.children) {
          route.children.forEach(child => {
            if (child.name == this.$route.name) {
              result = child;
            }
          });
        }
      });
      return result;
    },
    routePath() {
      return this.$route.path;
    }
  },
  components: {
    "img-text-list": imgTextList,
    "big-img-list": bigImgList,
    "big-img-card": bigImgCard,
    "half-width-list": halfWidthList
  }
};
</script>
